<template>
	<!-- 打卡列表 -->
	<view class="list">
		<view class="list-item" v-for="item,index in dataList" :key="index">
			<view class="list-item-title">任务名称：{{ item.task_name }}</view>
			<view class="list-item-type" v-if="userType === 1">任务类型：{{ item.task_type === 1 ? '每日' : '限定' }}</view>
			<view class="list-item-status" v-if="userType === 2">打卡状态：{{ item.status === 2 ? '未打卡' : '已打卡' }}</view>
			<view class="list-item-time" v-if="item.status === 1">打卡时间：{{ timeLoad(item.finish_time) }}</view>
			<view class="list-item-time" v-else>任务时间：{{ timeLoad(item.start_time) }}</view>
			<view class="list-item-content">任务内容：{{ item.task_content }}</view>
			<view class="list-item-score">+{{item.task_score}}分</view>
			<button class="list-item-btn" v-if="isClockBtn"
				@tap="checkFinishTaskIn(index)">打卡</button>
			<button class="list-item-btn" v-if="isUpdateBtn" @tap="checkUpdateIn(index)">编辑</button>
			<button class="list-item-btn-del" v-if="isUpdateBtn" @tap="checkDelIn(index)">删除</button>
		</view>
	</view>
</template>

<script>
	import {
		formatDate
	} from '@/utils/time.js'
	import store from '@/store/index.js'; //需要引入store
	import {
		patriarchClockTaskDel,
		babyFinishTaskAdd
	} from '@/api/api.js'
	export default {
		name: "clock-list",
		props: {
			dataList: {
				type: Array,
				required: true
			},
			isClockBtn: {
				type: Boolean,
				required: true
			},
			isUpdateBtn: {
				type: Boolean,
				required: true
			}
		},
		data() {
			return {
				userType: store.state.userType
			}
		},
		methods: {
			checkUpdateIn(index) {
				uni.redirectTo({
					url: '/pages/index/update/update?task_sid=' + this.dataList[index].task_uuid
				});
			},
			checkDelIn(index) {
				console.log("this.dataList[index].task_uuid")
				console.log(this.dataList[index].task_uuid)
				var sid = this.dataList[index].task_uuid
				uni.showModal({
					title: "温馨提示",
					content: "确认删除？",
					success(res) {
						if (res.confirm) {
							patriarchClockTaskDel(sid).then(res => {
								console.log(res.data)
								if (res.data.code != 0) {
									uni.showToast({
										icon: "none",
										title: res.data.message
									})
								} else {
									uni.reLaunch({
										url: '/pages/index/index'
									})
								}
							})
						}
					},

				})
			},
			checkFinishTaskIn(index) {
				console.log(this.dataList[index])
				babyFinishTaskAdd(this.dataList[index].task_uuid).then(res => {
					console.log(res.data)
					if (res.data.code != 0) {
						uni.showToast({
							icon: "none",
							title: res.data.message
						})
					} else {
						this.dataList[index].status = 1
						uni.showToast({
							icon: "none",
							title: "打卡成功"
						})
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
					this.isload = false
				})
			},
			formatTime(date) {
				const year = date.getFullYear()
				const month = this.formatNumber(date.getMonth() + 1)
				const day = this.formatNumber(date.getDate())
				const hour = this.formatNumber(date.getHours())
				const minute = this.formatNumber(date.getMinutes())
				const second = this.formatNumber(date.getSeconds())
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`
			},
			formatNumber(n) {
				n = n.toString()
				return n[1] ? n : '0' + n
			},
			timeLoad(time) {
				const d = new Date(time * 1000)
				return formatDate(d, 'yyyy-MM-dd')
			},
		}
	}
</script>
<style>
	.list {
		width: 100%;
		margin-top: -10upx;
	}

	.list-item {
		height: 310rpx;
		border-bottom: 1px solid #ddd;
		padding: 20upx 0;
		display: flex;
	}

	.list-item-title {
		font-size: 32rpx;
		color: #333;

	}

	.list-item-type {
		font-size: 28rpx;
		color: #20f8f2;
		margin-top: 50rpx;
		position: absolute;
	}

	.list-item-status {
		font-size: 28rpx;
		color: #f200ca;
		margin-top: 85rpx;
		position: absolute;
	}

	.list-item-time {
		font-size: 28rpx;
		color: #e1290d;
		margin-top: 115rpx;
		position: absolute;
	}

	.list-item-content {
		font-size: 25rpx;
		color: #666;
		width: 80%;
		margin-top: 150rpx;
		position: absolute;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		line-clamp: 4;
		-webkit-box-orient: vertical;
	}

	.list-item-btn {
		font-size: 28rpx;
		color: #fff;
		background-color: #007aff;
		border-radius: 8upx;
		border: none;
		outline: none;
		height: 5%;
		width: 120rpx;
		cursor: pointer;
		justify-content: center;
		align-items: center;
		position: absolute;
		margin-left: 600rpx;
	}

	.list-item-btn-del {
		font-size: 28rpx;
		color: #fff;
		background-color: #007aff;
		border-radius: 8upx;
		border: none;
		outline: none;
		height: 5%;
		width: 120rpx;
		cursor: pointer;
		justify-content: center;
		align-items: center;
		position: absolute;
		margin-left: 600rpx;
		margin-top: 80rpx;
	}

	.list-item-score {
		font-size: 32rpx;
		margin-left: 600rpx;
		color: #20d417;
		position: absolute;
	}
</style>